<template>
    <div class="main-box">
        <div class="login-box">
            <div class="title">欢迎登录失物招领系统</div>
            <a-form :model="formState" name="normal_login" class="login-form" @finish="onFinish">
                <a-form-item label="" name="username" :rules="[{ required: true, message: '请输入用户名' }]">
                    <a-input v-model:value="formState.username" placeholder="用户名">
                        <template #prefix>
                            <UserOutlined class="site-form-item-icon" />
                        </template>
                    </a-input>
                </a-form-item>

                <a-form-item label="" name="password" :rules="[{ required: true, message: '请输入密码' }]">
                    <a-input-password v-model:value="formState.password" placeholder="密码">
                        <template #prefix>
                            <LockOutlined class="site-form-item-icon" />
                        </template>
                    </a-input-password>
                </a-form-item>
                <a-form-item>
                    <a-button style="width: 100%;" type="primary" html-type="submit" :loading="loading">
                        登录
                    </a-button>
                </a-form-item>
            </a-form>
        </div>
    </div>
</template>
<script setup>
import { reactive, ref } from 'vue';
import { UserOutlined, LockOutlined } from '@ant-design/icons-vue';
import { login } from '@/api/admin';
import { useRouter } from 'vue-router';
import { message } from "ant-design-vue";

const router = useRouter();
const loading = ref(false);
const formState = reactive({
    username: '',
    password: '',
});
const onFinish = async (values) => {
    try {
        loading.value = true;
        const { result } = await login(values);
        localStorage.setItem('token', result.token);
        localStorage.setItem('userInfo', JSON.stringify(result.userInfo));
        router.replace('/carousel');
    } finally {
        loading.value = false;
    };
};
</script>
<style lang="less" scoped>
.main-box {
    width: 100%;
    height: 100%;
    background-image: url('@/assets/back.webp');
    background-size: 100% 100%;
    position: relative;

    .login-box {
        width: 450px;
        padding: 30px;
        border-radius: 10px;
        background: rgba(255, 255, 255, 0.2);
        box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
        backdrop-filter: blur(12.5px);
        border-radius: 10px;
        border: 1px solid rgba(255, 255, 255, 0.18);
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);

        .title {
            font-size: 20px;
            font-weight: 700;
            text-align: center;
            margin: 30px;
        }
    }
}
</style>